import React, { forwardRef, useImperativeHandle, useRef } from 'react';
import { Divider } from 'antd';
import ProTable, { ProColumns, ActionType } from '@ant-design/pro-table';
import { showMsg } from '@/utils/utils';
import { getAfterSaleHandleList } from '@/services/shop/api'

const OptRecord: React.FC<{apply_id: string; title: string;}> = forwardRef((props, ref) => {
  const { apply_id, title } = props;
  const actionRef = useRef<ActionType>();
  const columns: ProColumns<any>[] = [
    {
      title: '操作者',
      dataIndex: 'worker_name'
    },
    {
      title: '工号',
      dataIndex: 'worker_no'
    },
    {
      title: '操作时间',
      dataIndex: 'oper_time'
    },
    {
      title: '订单状态',
      dataIndex: 'status',
      valueType: 'select',
      valueEnum: {
        U: '待处理',
        H: '受理中',
        S: '已完成',
        F: '已拒绝',
        C: '已撤销',
        D: '退款失败',
      }
    },
    {
      title: '备注',
      dataIndex: 'note',
      width: 400,
    }
  ];

  useImperativeHandle(ref, () => ({
    reload: () => actionRef.current?.reload()
  }))

  return <div className="service-record after-record">
     <div className="header">
        <div className="title">{title}</div>
      </div>
      <Divider style={{margin: '10px 0 0'}} />

      <ProTable<any> 
         bordered
         actionRef={actionRef}
         style={{ marginTop: -5 }} 
         rowKey="record_id"
         options={false} 
         search={false} 
         pagination={false}
         request={async () => {
           try {
             const list: any[] = await getAfterSaleHandleList(apply_id)
             return {
               data: list,
               success: true
             }
           } catch (error) {
             showMsg(error?.data?.errmsg)
             return {
               data: []
             }
           }
         }}
         columns={columns} />
  </div>
});
export default OptRecord;